<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>香奈儿</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/animate.min.css">
    <style>
        .animated {
            opacity: 0;
        }

        ::-webkit-scrollbar {
            display: none;
        }
    </style>

<body>

    <!-- 导航栏 -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">CHANEL</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">香水</a></li>
                    <li><a href="#">彩妆</a></li>
                    <li><a href="#">护肤品</a></li>
                    <li><a href="#">腕表</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <!-- 轮播图 -->
    <div id="carousel" class="carousel slide" data-ride="carousel">

        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="./imgs/rb1.jpg" alt="..." style="display: block; width: 100%;">
            </div>
            <div class="item">
                <img src="./imgs/rb2.jpg" alt="..." style="display: block; width: 100%;">
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <div class="container my-pdtop">
        <div class="row divtest animated" data-animation="fadeInUp">
            <div class="col-md-12">
                <div class="my-title">永恒经典</div>
            </div>
            <div class="col-md-5">
                <img src="./imgs/pic.jpg" style="width:100%" />
            </div>
            <div class="col-md-6">
                <p>产品描述</p>
                <p>蕴含五月香草荚果瞬时活性成分：在荚果成熟前的生长期中，所产生的一种转瞬即逝的活性分子，具有珍贵而强大的赋活力。凭借先进科技转化为配方中的持久性成分，将赋活功效传递给肌肤，令肌肤重获活力、强韧和光泽。
                </p>
                <p>产品配方</p>
                <p>香奈儿研究部门针对活性分子娇弱的特性，开创慢式萃取法，这种全新科技能够在荚果生长过程中的精确时段萃取出五月香草荚果瞬时活性成分，并转化为可添加在配方中的持久性成分。</p>
                <p>护肤功效</p>
                <p>多种赋活功效，令肌肤重获活力、强韧和光泽。</p>
                <p>- 活力：肌肤得到充分滋润保湿与防护，焕发健康光采。</p>
                <p>- 强韧：肌肤更加饱满、紧致，脸部轮廓更显年轻。</p>
                <p>- 光泽：肤色更加均匀，肌肤质感更加细腻，富有弹性。</p>
            </div>
        </div>
    </div>

    <div class="my-conainer my-pdtop">
        <div class="container">
            <div class="row divtest animated" data-animation="fadeInUp">
                <div class="col-md-12">
                    <div class="my-title" style="margin-bottom: 50px;">烈焰红唇</div>
                </div>
                <div class="col-md-6">
                    <p>哑光红唇与黑色眼线精美勾勒的双眸完美搭配，打造经典彩妆造型。</p>
                    <p>- 上妆前，先使用山茶花润泽微精华乳霜为肌肤打底，它含水量超高，具有卓越的保湿功效，同时质地轻盈。为获得最佳补水效果，建议请使用粉底刷上妆，涂抹粉底。</p>
                    <p>- 使用手指或此前涂抹山茶花润泽微精华乳霜的粉底刷涂抹保湿隔离修饰乳（CC霜），以增强保湿功效。</p>
                    <p>- 使用持久精准眼线膏（65号）勾勒眼部轮廓，使用随附刷具的特殊角度刷头或眼线刷描画上眼睑。乳霜质地和专用刷具使上妆过程更易操控。沿睫毛根部在内眼角描画一条粗细适中的线条，一直延伸至外眼角。
                    </p>
                    <p>- 使用全新炫亮魅力印记唇釉（818）打造出挑的烈焰红唇。哑光润泽质地与双唇完美融合，持妆可达数小时。厚涂可增强妆效。柔化唇边可营造摩登范。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 产品 -->
    <div class="container my-pdtop">
        <div class="row divtest animated" data-animation="fadeInUp">
            <div class="col-md-12">
                <div class="my-title" style="margin-bottom: 50px;">明星产品</div>
            </div>

            <div class="col-xs-6 col-md-4">
                <div class="product divtest animated  animation-delay-2" data-animation="fadeInUp">
                    <img src="./imgs/p1.jpg" />
                    <div class="price">￥330.00</div>
                    <div>CHANCE EAU TENDRE</div>
                    <div>香奈儿邂逅柔情淡香水（瓶装）</div>
                </div>
            </div>
            <div class="col-xs-6 col-md-4 ">
                <div class="product divtest animated  animation-delay-2" data-animation="fadeInUp">
                    <img src="./imgs/p2.jpg" />
                    <div class="price">￥330.00</div>
                    <div>ROUGE ALLURE VELVET</div>
                    <div>香奈儿炫亮魅力唇膏丝绒系列</div>
                </div>
            </div>
            <div class="col-xs-6 col-md-4 ">
                <div class="product divtest animated  animation-delay-2" data-animation="fadeInUp">
                    <img src="./imgs/p3.jpg" />
                    <div class="price">￥330.00</div>
                    <div>BLEU DE CHANEL</div>
                    <div>香奈儿蔚蓝男士淡香水</div>
                </div>
            </div>
            <div class="col-xs-6 col-md-4 ">
                <div class="product divtest animated  animation-delay-2" data-animation="fadeInUp">
                    <img src="./imgs/p3.jpg" />
                    <div class="price">￥330.00</div>
                    <div>BLEU DE CHANEL</div>
                    <div>香奈儿蔚蓝男士淡香水</div>
                </div>
            </div>
            <div class="col-xs-6 col-md-4 ">
                <div class="product divtest animated  animation-delay-2" data-animation="fadeInUp">
                    <img src="./imgs/p2.jpg" />
                    <div class="price">￥330.00</div>
                    <div>ROUGE ALLURE VELVET</div>
                    <div>香奈儿炫亮魅力唇膏丝绒系列</div>
                </div>
            </div>
            <div class="col-xs-6 col-md-4">
                <div class="product divtest animated  animation-delay-2" data-animation="fadeInUp">
                    <img src="./imgs/p1.jpg" />
                    <div class="price">￥330.00</div>
                    <div>CHANCE EAU TENDRE</div>
                    <div>香奈儿邂逅柔情淡香水（瓶装）</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页面底部 -->
    <div class="my-conainer2">
        <div class="container footer">
            <div class="row divtest animated" data-animation="fadeInUp">
                <div class="col-xs-12 pai">CHANEL</div>
                <div class="col-xs-6 col-md-4">
                    <p>前往 CHANEL.COM</p>
                    <p>高级定制服</p>
                    <p>服饰名品</p>
                    <p>腕表</p>
                    <p>高级珠宝</p>
                </div>
                <div class="col-xs-6 col-md-4">
                    <p>香奈儿与您</p>
                    <p>法律声明</p>
                    <p>隐私政策</p>
                    <p>工作计划</p>
                </div>
                <div class="col-xs-12 col-md-4">
                    <div class="" style="text-align:center;">
                        <img src="./imgs/basic.png" width="40%" />
                    </div>
                </div>
                <div class="col-xs-12 col-md-12" style="text-align: center;margin-top: 10px;">
                    <p>&copy;&nbsp;2021&nbsp;CHANEL&nbsp;All Rights Reserved.</p>
                </div>
            </div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/isScroll.js"></script>
    <script>
        $(document).ready(function () {
            isScroll.init('.divtest');
        });
    </script>
</body>

</html>